<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minecraft 17277-服务器IP地址</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
            color: white;
            min-height: 100vh;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
        }
        
        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .container {
            max-width: 800px;
            width: 100%;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            margin: 20px 0;
            backdrop-filter: blur(10px);
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            color: #4CAF50;
            text-shadow: 0 0 15px rgba(76, 175, 80, 0.7);
        }
        
        header p {
            font-size: 1.2rem;
            opacity: 0.9;
        }
        
        .server-card {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .ip-section {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 20px;
            border: 2px solid #4CAF50;
        }
        
        .section-title {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
            font-size: 1.5rem;
            color: #4CAF50;
        }
        
        .section-title i {
            font-size: 1.8rem;
        }
        
        .ip-display {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 15px;
            margin: 15px 0;
        }
        
        .ip-address {
            font-size: 1.8rem;
            font-family: 'Courier New', Courier, monospace;
            word-break: break-all;
            flex-grow: 1;
            padding: 12px 20px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 8px;
            border: 1px solid #4CAF50;
        }
        
        .btn {
            padding: 12px 25px;
            font-size: 1.2rem;
            background: linear-gradient(to right, #4CAF50, #2E7D32);
            color: white;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
            background: linear-gradient(to right, #43A047, #1B5E20);
        }
        
        .btn:active {
            transform: translateY(1px);
        }
        
        .update-info {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            font-size: 0.9rem;
            opacity: 0.8;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .error-message {
            background: rgba(244, 67, 54, 0.2);
            border-radius: 10px;
            padding: 15px;
            margin-top: 15px;
            border-left: 4px solid #F44336;
        }
        
        .error-message h3 {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #ffcdd2;
            margin-bottom: 8px;
        }
        
        .detail-link {
            display: block;
            margin-top: 15px;
            color: #4CAF50;
            text-decoration: none;
            font-size: 1.1rem;
            transition: color 0.3s;
        }
        
        .detail-link:hover {
            color: #2E7D32;
            text-decoration: underline;
        }
        
        .detail-link i {
            margin-right: 8px;
        }
        
        footer {
            text-align: center;
            margin-top: 20px;
            opacity: 0.7;
            font-size: 0.9rem;
        }
        
        @media (max-width: 600px) {
            .ip-display {
                flex-direction: column;
                align-items: stretch;
            }
            
            .ip-address {
                font-size: 1.4rem;
            }
            
            .btn {
                width: 100%;
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-server"></i> Minecraft 17277-服务器IP地址</h1>
            <p>获取服务器连接地址</p>
        </header>
        
        <main class="server-card">
            <section class="ip-section">
                <h2 class="section-title"><i class="fas fa-network-wired"></i> 服务器连接地址</h2>
                
                <div class="ip-display">
                    <div class="ip-address" id="ip-address">正在获取服务器地址...</div>
                    <button class="btn" onclick="copyIP()">
                        <i class="fas fa-copy"></i> 复制地址
                    </button>
                </div>
                
                <a href="#" id="detail-link" class="detail-link" target="_blank">
                    <i class="fas fa-external-link-alt"></i> 查询服务器详情
                </a>
                
                <div class="update-info">
                    <span>最后更新: <span id="update-time">--:--:--</span></span>
                    <span>状态: <span id="update-status">获取中...</span></span>
                </div>
                
                <div class="error-message" id="error-message" style="display: none;">
                    <h3><i class="fas fa-exclamation-triangle"></i> 获取IP失败</h3>
                    <p>原因: <span id="error-detail">未知错误</span></p>
                    <p>解决方案: 
                        <ul>
                            <li>检查您的网络连接</li>
                            <li>尝试刷新页面</li>
                            <li>如果持续失败，请联系管理员</li>
                        </ul>
                    </p>
                </div>
            </section>
            
            <section class="info-section">
                <h2 class="section-title"><i class="fas fa-info-circle"></i> 连接指南</h2>
                
                <div class="instructions">
                    <ol>
                        <li>点击上方 <strong>"复制地址"</strong> 按钮</li>
                        <li>打开 Minecraft 游戏</li>
                        <li>进入"多人游戏" → "添加服务器"</li>
                        <li>在"服务器地址"栏中粘贴复制的地址</li>
                        <li>点击"完成"并连接服务器</li>
                    </ol>
                </div>
                
                <div class="note">
                    <h3><i class="fas fa-exclamation-triangle"></i> 注意事项</h3>
                    <p>服务器IP地址会定期自动更新，如果无法连接请刷新本页面获取最新地址。</p>
                    <p><strong>基岩版玩家请注意：</strong>请使用端口19132连接服务器。</p>
                </div>
            </section>
        </main>
    </div>
    
    <footer>
        <p>服务器IP提供系统 &copy; 2023 | 自动更新每300秒</p>
    </footer>
    
    <script>
        // 页面元素
        const ipAddressEl = document.getElementById('ip-address');
        const updateTimeEl = document.getElementById('update-time');
        const updateStatusEl = document.getElementById('update-status');
        const errorMessageEl = document.getElementById('error-message');
        const errorDetailEl = document.getElementById('error-detail');
        const detailLinkEl = document.getElementById('detail-link');
        
        // 获取IP地址
        async function fetchIP() {
            try {
                updateStatusEl.textContent = '获取中...';
                errorMessageEl.style.display = 'none';
                
                // 使用GitHub Pages路径获取ip.txt（添加时间戳避免缓存）
                const response = await fetch('ip.txt?t=' + new Date().getTime());
                
                if (!response.ok) {
                    throw new Error('文件获取失败');
                }
                
                // 获取IP并去除前后空格
                const ip = (await response.text()).trim();
                
                // 显示IP地址
                ipAddressEl.textContent = ip;
                updateTimeEl.textContent = new Date().toLocaleTimeString();
                updateStatusEl.textContent = '已更新';
                
                // 设置查询详情链接
                detailLinkEl.href = `https://mcsrvstat.us/server/${encodeURIComponent(ip)}`;
                
            } catch (error) {
                ipAddressEl.textContent = "⚠️ 获取服务器地址失败，请稍后刷新";
                updateStatusEl.textContent = '更新失败';
                errorDetailEl.textContent = error.message;
                errorMessageEl.style.display = 'block';
                detailLinkEl.style.display = 'none';
            }
        }
        
        // 复制IP地址功能
        function copyIP() {
            const ip = ipAddressEl.textContent;
            if(ip === "正在获取服务器地址..." || ip.startsWith("⚠️")) {
                alert('当前没有有效的IP地址可复制');
                return;
            }
            
            navigator.clipboard.writeText(ip).then(() => {
                const btn = document.querySelector('.btn');
                const originalText = btn.innerHTML;
                
                btn.innerHTML = '<i class="fas fa-check"></i> 已复制!';
                btn.style.background = 'linear-gradient(to right, #2E7D32, #1B5E20)';
                
                setTimeout(() => {
                    btn.innerHTML = originalText;
                    btn.style.background = 'linear-gradient(to right, #4CAF50, #2E7D32)';
                }, 2000);
            }).catch(err => {
                alert('复制失败，请手动选择复制');
            });
        }
        
        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', () => {
            // 初始获取IP
            fetchIP();
            
            // 每300秒更新一次
            setInterval(fetchIP, 300000);
        });
    </script>
</body>
</html>
